<template>
	<div class="shangpinsousuo">
		<!--上级-->
		<div class="fensiqian">
			<div class="darensou">
				<div class="darensou1">
					<input type="search" value="" placeholder="请输入商品名称" />
					<button style="cursor: pointer;">
						<i class="el-icon-search"></i>
					</button>
				</div>
			</div>
			
			<div class="fensidaizhuang">
				<div class="fensidaizhuang1">
					商品渠道
				</div>
				<div class="fensidaizhuang2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="fensidaizhuang3">
					<div class="fensidaizhuang3_2">
						<ul>
							<li v-for="(item,index) in xiaodian" :key="index">
								{{item.name}}
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="shangfei">
				<div class="shangfei1">
					商品分类
				</div>
				<div class="shangfei2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="shangfei3">
					<div class="shangfei3_2">
						<ul>
							<li v-for="(item,index) in 15" :key="index">
								运动户外
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="darenfensi">
				<div class="darenfensi1">
					价格区间
				</div>
				<div class="darenfensi2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="darenfensi3">
					<div class="darenfensi3_1">
						<ul>
							<li v-for="(item,index) in 6" :key="index">
								10万~50万
							</li>
						</ul>
					</div>
					<div class="darenfensi3_2">
						<div class="darenfensi_suan1">
							<input type="text" v-model="wan1" value="" />万
						</div>
						<div class="darenfensi_suan2"></div>
						<div class="darenfensi_suan3">
							<input type="text" v-model="wan2" value="" />万
						</div>
						<div class="darenfensi_suan4">
							筛选
						</div>
					</div>
				</div>
			</div>
			
			<div class="fensizhuyin">
				<div class="fensizhuyin1">
					销量区间
				</div>
				<div class="fensizhuyin2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="fensizhuyin3">
					<div class="fensizhuyin3_1">
						<ul>
							<li v-for="(item,index) in 6" :key="index">
								0-50
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="fangwenqu">
				<div class="fangwenqu1">
					访问区间
				</div>
				<div class="fangwenqu2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="fangwenqu3">
					<div class="fangwenqu3_1">
						<ul>
							<li v-for="(item,index) in 6" :key="index">
								10万~50万
							</li>
						</ul>
					</div>
					<div class="fangwenqu3_2">
						<div class="fangwenqu_suan1" @click="bianhua">
							<div class="shangxia1">访客数排序</div>
							<div class="shangxia2">
								<i class="el-icon-caret-bottom" :class="{'bianse':huan==1}"></i>
							</div>
						</div>
						<div class="fangwenqu_suan3" @click="bianhua1">
							<div class="shangxia3">销量排序</div>
							<div class="shangxia4">
								<i class="el-icon-caret-bottom" :class="{'bianse':huan1==1}"></i>
							</div>
						</div>
						<div class="fangwenqu_suan4" @click="bianhua2">
							<div class="shangxia5">价格排序</div>
							<div class="shangxia6">
								<i class="el-icon-caret-top" :class="{'bianse':huan2==1}"></i>
								<i class="el-icon-caret-bottom" :class="{'bianse':huan2==2}"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		
		<div class="fangpai">
			<div class="silingsi">
				<img src="../../../../assets/img/404.png" />
				<span>升级至高级版即可查看热门商品</span>
			</div>
			<div class="lijishengji" @click="open">立即升级</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				xiaodian:[
					{name:"淘宝"},{name:"抖音小店"},{name:"京东"},{name:"考拉海购"},{name:"苏宁易购"},{name:"唯品会"}
				],
				
				wan1:'',
				wan2:'',
				
				bei:0,
				huan:0,
				
				bei1:0,
				huan1:0,
				
				bei2:0,
				huan2:0,
			}
		},
		activated() {
			
		},
		mounted:function(){
			var _self=this;
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//访问区间
			$(".fangwenqu3_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".fangwenqu3").siblings(".fangwenqu2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".fangwenqu2").siblings(".fangwenqu3").children(".fangwenqu3_1").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			//价格区间
			$(".darenfensi3_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".darenfensi2").siblings(".darenfensi3").children(".darenfensi3_1").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			//商品渠道
			$(".fensidaizhuang3_2 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".fensidaizhuang3").siblings(".fensidaizhuang2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			
			//监听input框的文字输入事件
			$(".darenfensi3_2 input").keyup(function(){
				if(_self.wan1 || _self.wan2){
					$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
						"background-color": "#fff",
						"color":"#999"
					})
					
					$(this).parents(".darenfensi3_2").siblings(".darenfensi3_1").children("ul").children("li").css({
						"background-color": "#fff",
						"color":"#999"
					})
				}else{
					$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
						"background-color": "#0091FF",
						"color":"#fff"
					})
				}
			})
			
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".fensidaizhuang2").siblings(".fensidaizhuang3").children(".fensidaizhuang3_2").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			//商品分类
			$(".shangfei3_2 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".shangfei3").siblings(".shangfei2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".shangfei2").siblings(".shangfei3").children(".shangfei3_2").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			//销量区间
			$(".fensizhuyin3_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".fensizhuyin3").siblings(".fensizhuyin2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".fensizhuyin2").siblings(".fensizhuyin3").children(".fensizhuyin3_1").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
		},
		methods:{
			//访客数排序
			bianhua(){
				if(this.bei==0){
					this.huan=1;
					this.bei=1;
				}else if(this.bei==1){
					this.bei=0;
					this.huan=0
				}
				
				this.bei1=0;
				this.huan1=0;
				
				this.bei2=0;
				this.huan2=0;
			},
			//销量排序
			bianhua1(){
				if(this.bei1==0){
					this.huan1=1;
					this.bei1=1;
				}else if(this.bei1==1){
					this.bei1=0;
					this.huan1=0
				}
				
				this.bei=0;
				this.huan=0;
				
				this.bei2=0;
				this.huan2=0;
			},
			//价格排序
			bianhua2(){
				if(this.bei2==0){
					this.huan2=1;
					this.bei2=1;
				}else if(this.bei2==1){
					this.bei2=2;
					this.huan2=2;
				}else if(this.bei2==2){
					this.bei2=0;
					this.huan2=0;
				}
				
				this.bei1=0;
				this.huan1=0;
				
				this.bei=0;
				this.huan=0;
			},
			
			 open() {
				this.$confirm('此功能仅限高级版本使用，请升级后再试', '升级提示', {
				  confirmButtonText: '立即升级',
				  cancelButtonText: '我在想想',
				  type: 'warning',
				}).then(() => {
				 //  this.$message({
					// type: 'success',
					// message: '立即升级!'
				 //  });
				 this.$router.push('/home/'+this.$store.state.luyoushu+'/xufeizhongxin')
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '好好在想想哟！'
				  });          
				});
			  }
		}
	}
</script>

<style scoped lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shangpinsousuo{
		.fensiqian{
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 1rem 0.8rem;
			.darensou{
				
				.darensou1{
					float: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #D4D4D4;
					
					input{
						border: none;
						outline: none;
						width: 7rem;
						height: 1.1rem;
						letter-spacing: 0.02rem;
						padding-left:0.4rem ;
						font-size: 0.4rem;
					}
					input::placeholder{
						color: #D3D3D3;
						font-size: 0.35rem;
					}
					button{
						border: none;
						outline: none;
						padding: 0.3rem;
						background-color: #fff;
						font-size: 0.4rem;
					}
				}
				.darensou2{
					float: left;
					margin-left:1rem ;
					color: #333333;
					font-size: 0.5rem;
					letter-spacing: 0.05rem;
					margin-top:0.2rem ;
					
					span{
						color: #0091FF;
					}
				}
			}
			.darensou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.darenbiaoqian{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.darenbiaoqian1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenbiaoqian2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.darenbiaoqian3{
					flex: 11;
					.xuan{
						margin-left:1rem ;
						margin-bottom:1rem ;
						float: left;
						display: flex;
						justify-content: space-around;
						align-items: center;
						input{
							cursor: pointer;
						}
						label{
							padding-left:0.2rem ;
							cursor: pointer;
							color: #999;
							font-size: 0.45rem;
						}
					}
				}
				.darenbiaoqian3::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			
			.fensidaizhuang{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.fensidaizhuang1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.fensidaizhuang2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.fensidaizhuang3{
					flex: 11;
					
					.fensidaizhuang3_2{
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								margin-bottom:0.4rem ;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			
			.shangfei{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.shangfei1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.shangfei2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.shangfei3{
					flex: 11;
					
					.shangfei3_2{
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								margin-bottom:0.4rem ;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			
			.darenfensi{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.darenfensi1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenfensi2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.darenfensi3{
					flex: 11;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.darenfensi3_1{
						flex: 2.65;
						
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.darenfensi3_2{
						text-align: right;
						flex: 1;
						display: flex;
						align-items: center;
						
						.darenfensi_suan1{
							color: #999999;
							font-size: 0.4rem;
							display: flex;
							justify-content: space-between;
							align-items: center;
							input{
								width:1.5rem;
								height: 0.6rem;
								border: 1px solid #D4D4D4;
								outline: none;
								margin-right:0.3rem ;
								font-size: 0.35rem;
								padding: 0 0.2rem;
							}
						}
						.darenfensi_suan2{
							width: 0.6rem;
							height: 0.02rem;
							background-color: #D4D4D4;
							margin: 0 0.4rem;
							margin-top:0.1rem ;
						}
						.darenfensi_suan3{
							color: #999999;
							font-size: 0.4rem;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-right:0.4rem ;
							input{
								width:1.5rem;
								height: 0.6rem;
								border: 1px solid #D4D4D4;
								outline: none;
								margin-right:0.3rem ;
								font-size: 0.35rem;
								padding: 0 0.2rem;
							}
						}
						.darenfensi_suan4{
							color: #fff;
							background-color: #0091FF;
							padding: 0.1rem 0.3rem;
							font-size: 0.35rem;
							cursor: pointer;
						}
						@keyframes jello-horizontal {
						  0% {
						    transform: scale3d(1, 1, 1);
						  }
						  30% {
						    transform: scale3d(1.25, 0.75, 1);
						  }
						  40% {
						    transform: scale3d(0.75, 1.25, 1);
						  }
						  50% {
						    transform: scale3d(1.15, 0.85, 1);
						  }
						  65% {
						    transform: scale3d(0.95, 1.05, 1);
						  }
						  75% {
						    transform: scale3d(1.05, 0.95, 1);
						  }
						  100% {
						    transform: scale3d(1, 1, 1);
						  }
						}
						
						.darenfensi_suan4:hover{
							animation: jello-horizontal 0.9s both;
						}
					}
				}
			}
			
			.fensizhuyin{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.fensizhuyin1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.fensizhuyin2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						display: inline;
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
					}
				}
				.fensizhuyin3{
					flex: 11;
					
					.fensizhuyin3_1{
						
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			
			.fangwenqu{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.fangwenqu1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.fangwenqu2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.fangwenqu3{
					flex: 11;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.fangwenqu3_1{
						flex: 2.65;
						
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.fangwenqu3_2{
						text-align: right;
						flex: 1;
						display: flex;
						align-items: center;
						
						.fangwenqu_suan1{
							cursor: pointer;
							color: #999999;
							font-size: 0.4rem;
							.shangxia1{
								float: left;
							}
							.shangxia2{
								float: left;
								box-sizing: border-box;
								height: 0.55rem;
								margin-left:0.2rem ;
							}
						}
						.fangwenqu_suan3{
							cursor: pointer;
							margin:0 0.8rem ;
							color: #999999;
							font-size: 0.4rem;
							.shangxia3{
								float: left;
							}
							.shangxia4{
								float: left;
								box-sizing: border-box;
								height: 0.55rem;
								margin-left:0.2rem ;
							}
						}
						.fangwenqu_suan4{
							cursor: pointer;
							color: #999999;
							font-size: 0.35rem;
							.shangxia5{
								float: left;
							}
							.shangxia6{
								float: left;
								box-sizing: border-box;
								height: 0.55rem;
								margin-left:0.2rem ;
								
								i{
									display: block;
								}
								i:nth-of-type(2){
									margin-top:-0.2rem ;
								}
							}
						}
						.bianse{
							color:#1890FF ;
						}
					}
				}
			}
		}
		
		.fangpai{
			margin-top:1rem ;
			background-color: #fff;
			padding: 4rem 0;
			text-align: center;
			
			.silingsi{
				text-align: center;
				
				img{
					height: 4rem;
				}
				span{
					display: block;
					color: #999999;
					font-size: 0.4rem;
					padding: 0.6rem 0;
					box-sizing: border-box;
				}
			}
			.lijishengji{
				cursor: pointer;
				border-radius:0.1rem ;
				background-color: #0091FF;
				color: #fff;
				font-size: 0.4rem;
				text-align: center;
				padding: 0.2rem 0.4rem;
				margin: auto;
				display: inline;
			}
		}
	}
</style>